<template>
	<view  class="">
		<view class="head">
			<view class="head_left" @click="navigateBack()"><image src="/static/img/fanhui.png" mode=""></image></view>

			<view class="head_center hei_38_bold text_center" >
				 登录
			</view>
			<view class="hei_30_bold head_right PingFang"> </view>
		</view>
		<view class="content">
			<view class="app_content">
				<view class="logo">
					<image :src="img_url+logo" mode=""></image>
				</view>
				<view class="yonghu_zhuce ">
					<view class="zhuce_list">
						<image src="/static/img/shouj_icon.png"></image>
						<input type="text" value="" placeholder="手机号码" v-model="shouji" class="hei_28" />
					</view>

					<view class="zhuce_list">
						<image src="/static/img/mima_icon.png" mode=""></image>
						<input :type="type1" value="" placeholder="请输入密码" @input="mimashu" class="hei_28" />
						<image :src="yan1_zhuangtai" mode="" @click="chakan()" :class="['yanjing', type1 == 'text' ? 'kai' : 'guan']"></image>
					</view>

	
					<button type="" class="zhuce bai_30 " @click="login" :disabled="is_disabled" :class="is_disabled?'disabled_active':''">{{is_disabled?'加载中':'立即登录'}}</button>
					<view class="zhuce_tishi qian_24">
						没有账号？去<text  class="hong_24" @click="go_zhuce()">注册</text>
					</view>
				</view>
				<div class="login_bottom hei_28">
					<div class="login_bottom_item" @click="yijian" >
						<image src="/static/img/yijian_icon.png"></image>
						<p>一键登录</p>
					</div>
					
				</div>
			</view>
		</view>
<uni-popup id="tan_login" ref="tan_login" type="center">
<view class="tan_login">
	<view class="tan_login_box">
		<view class="tan_login_logo">
			<image :src="logo" mode=""></image>
		</view>
		<view class="hei_38_bold PingFang tan_login_shouquan">
			登录授权
		</view>
		<view class="tan_login_tishi hei_28">
			等你好久啦~
		</view>
		<view class="tan_login_bottom">
			<button type="button"  class="bai_30 "    open-type="getPhoneNumber" lang="zh_CN" @getphonenumber="bindGetPhoneNumber" scope='phoneNumber'>立即授权</button>
		</view>	
	</view>
	<view class="tan_login_close">
		<image src="/static/img/login_close.png" mode=""@click="$refs.tan_login.close()"></image>
	</view>
</view>
</uni-popup>	
		
	</view>
</template>

<script>
export default {
	data() {
		return {
			mima: '',
			shouji: '',
			type1: 'password',
			isCheck: false,
			yan1_zhuangtai: '/static/img/yanguan.png',
			dianji: true,
			is_disabled:false,
			
			isdisabled:false,
			
			shang_login_show:'',
			type:2,
			zhanname:'',
			logo:'',
			img_url:'',
			my_url:'/pages/index/my'
		};
	},
	onLoad(option) {


		this.get_peizhi()


	},
	onShow() {

	},
	methods: {
		navigateBack() {
			// uni.navigateBack();
			
			uni.reLaunch({
				url:this.my_url
			});
		},
		get_peizhi(){
		
			this.$http
				.get({
					url: '/api/getConfig',
				})
				.then(res => {
					if (res.code == 200&&res.config) {
						
						
						this.logo=res.config.website_logo
					}
				});
		},
		go_zhuce(){
			uni.redirectTo({
				url:'/pages/index/register'
			})
		},
        yijian(){
			this.$refs.tan_login.open()
		},
		huoqu_img_url() {
			this.$http
				.post({
					url: '/mapi/index/geturl'
				})
				.then(res => {
					if (res.code == 0) {
						uni.setStorageSync('img_url', res.data.url);
					}
				});
		},
		checkBox() {
			this.isCheck = !this.isCheck;
		},
		chakan() {
			if (this.type1 == 'password') {
				(this.type1 = 'text'), (this.yan1_zhuangtai = '/static/img/yankai.png');
			} else {
				this.type1 = 'password';
				this.yan1_zhuangtai = '/static/img/yanguan.png';
			}
		},
		VerificationCode: function(e) {
			var reg = /^1[3456789]\d{9}$/;
			
			if (this.shouji == '') {
				uni.showToast({
					title: '请输入手机号码',
					duration: 2000,
					icon: 'none'
				});
				return false;
			}
			if (!reg.test(this.shouji)) {
				uni.showToast({
					title: '手机号输入错误',
					duration: 2000,
					icon: 'none'
				});
				return false;
			}
			
			
		},
		login() {
			
			// if (!this.isCheck) {
			// 	uni.showToast({
			// 		title: '请同意用户协议和隐私政策',
			// 		duration: 2000,
			// 		icon: 'none'
			// 	});
			// 	return false;
			// }
            this.is_disabled=true
            setTimeout(()=>{
            	this.is_disabled=false
            },1000)
			var that = this;
			if (this.dianji) {
				this.dianji = false;
				this.$http
					.post({
						url: '/api/login',
						data: {
							"username": this.shouji,
							"password":this.mima
						}
					})
					.then(res => {
						console.log(res)
						if (res.code == 200) {
							uni.setStorageSync("Cookie",res.token)
							uni.switchTab({
								url:'/pages/index/my'
							})
							
						}
						setTimeout(function() {
							that.dianji = true;
						}, 500);
					});
			} else {
			}

			
		},

		mimashu(e) {
			this.mima = e.target.value;
		},
		get_user(){
			var that=this
			this.$http
				.post({
					url: '/mapi/user/user'
				})
				.then(res => {
					if (res.code == 0) {
						if(res.data.user.alipay_openid){
							uni.reLaunch({
								url:that.my_url
							})
						}else{
							
							
							
							
						}
						
						
						
					}
				});
		}
	}
};
</script>

<style>
.zhuce_list {
	border-bottom: 2rpx #e8e8e8 solid;
	height: 110rpx;
	display: flex;
	align-items: center;
	position: relative;
}
.yonghu_zhuce {
	padding: 0 30rpx;
	font-size: 28rpx;
	color: #777777;
}

.head_back image {
	width: 22rpx;
	height: 41rpx;
}
.zhuce_list image {
	width: 26rpx;
	height: 30rpx;
	margin-right: 30rpx;
}
.background_zhuti {
	width: 160rpx;
	height: 44rpx;
	border-radius: 22rpx;
	border: solid 2rpx #fc761f;
	background: none;
	line-height: 44rpx;
	color: #fc761f;
	font-size: 24rpx;
}
.zhuce_list_left {
	display: flex;
	align-items: center;
}
.yanjing {
	position: absolute;
	right: 30rpx;
	width: 27rpx !important;
	height: 19rpx !important;
	margin-right: 0 !important;
}
.zhuce_list input {
	width: 85% !important;
	height: 90%;
}

.yanzheng_icon {
	width: 29rpx !important;
	height: 26rpx !important;
}
button {
	margin: 0;
	padding: 0;
}
.xieyi {
	margin: 190rpx 0 40rpx 0;
	text-align: center;
	display: flex;
	justify-content: center;
}

.zhuce {
	height: 88rpx;
	border-radius: 44rpx;
	line-height: 88rpx;
	margin-top: 50rpx;
	background-color: #e7246a;
}

.zhuce_tishi {
	display: flex;
	align-items: center;
	justify-content: center;
	margin-top: 40rpx;
}

.wangji_mima {
	text-align: right;
	color: #6a3906;
}
.kai {
	width: 29rpx !important;
	height: 19rpx !important;
}
.guan {
	width: 28rpx !important;
	height: 14rpx !important;
}
.xieyi_xuan {
	margin-right: 10rpx;
}
.login_xuanze {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-top: 24rpx;
}

.logo_type_active {
	background-color: #fd4259;
	color: #ffffff;
}
.login_bottom {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0 54rpx;
	/* position: fixed; */
	width: 100%;
	background-color: #ffffff;
	bottom: 60rpx;
	box-sizing: border-box;
	margin-top: 150rpx;
	padding-bottom: 30rpx;
}
.login_bottom image {
	width: 100rpx;
	height: 100rpx;
	vertical-align: bottom;
	margin-bottom: 20rpx;
}
.login_bottom_item {
	text-align: center;
	margin-right: 110rpx;
	width: 140rpx;
	height: 200rpx;
}
.login_bottom_item:last-child{
	margin-right: 0;
}
.lan_24 {
	color: #33a7ff;
}
.disabled_active{
    background-color: #e9e9e9 !important;
}
.logo{
	text-align: center;
	margin: 100rpx 0 80rpx;
}
.logo image{
	width: 170rpx;
	height: 170rpx;
	border-radius: 100%;
}
.yan_btn{
	width: 190rpx;
	height: 60rpx;
	border-radius: 30rpx;
	border: solid 1rpx #e9a400;
	background-color: #ffffff;
	line-height: 60rpx;
	color: #e9a400;
	position: absolute;
	right: 0;
}
.yan_input{
	position: relative;
}
.yan_input input {
	width: 50% !important;
}
.border {
	border: solid 1px #eeeeee;
}
.head_center {
	width:400rpx;
	height: 63rpx;
	background-color: #f8f8f8;
	border-radius: 30rpx;
	display: flex;
	align-items: center;
	padding: 0 10rpx;
	box-sizing: border-box;
}
.head_center text {
	width: 361rpx;
	height: 63rpx;

	border-radius: 37rpx;
	display: inline-block;
	line-height: 63rpx;
}
.logo_type_active {
	background-color: #6a3906;
	color: #ffffff;
}
.text_center{
	text-align: center;
	background: none;
	justify-content: center;
}
.xieyi_txt {
	display: flex;
}
.zhuce_bottom{
	display: flex;
	align-items: center;
}
.tan_login{
	width: 600rpx;
	text-align: center;
	box-sizing: border-box;
}

.tan_login_tishi{
	text-align: center;
	line-height: 130rpx;
}
.tan_login_bottom{
	text-align: center;
}
.tan_login_bottom button{
	width: 467rpx;
	height: 80rpx;
	line-height: 80rpx;
	border-radius: 40rpx;
	margin: 0 auto;
	background-color: #e7246a;
}
.tan_login_logo image{
	width: 124rpx;
	height: 124rpx;
	border: 4rpx solid #ffffff;
	margin-top: -62rpx;
	border-radius: 100%;
	vertical-align: bottom;
	margin-bottom: 30rpx;
}
.tan_login_close image{
	width: 60rpx;
	height: 60rpx;
	margin-top: 60rpx;
}
.tan_login_box{
	height: 420rpx;
	background-color: #ffffff;
	border-radius: 34rpx;
}
</style>
